<template>
  <el-dialog class="un-write-dialog" :title="titleName" :visible.sync="show" @close="handleClose">
    <el-tabs class="un-write-dialog__tabs" v-model="activeDept" tab-position="left" @tab-click="handleClick">
      <el-tab-pane
        :label="sourceData[deptId].deptName"
        :name="deptId"
        v-for="deptId of deptList"
        :key="`dept_${deptId}`"
      >
        <el-table :data="sourceData[deptId].person">
          <el-table-column
            property="nickName"
            label="名称"
            align="center"
            min-width="150"
          ></el-table-column>
          <el-table-column
            property="phonenumber"
            label="电话"
            align="center"
            min-width="200"
          ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
export default {
  name: "UnWriteDialog",
  props: {
    isOpen: Boolean,
    sourceData: Object,
  },
  computed: {
    deptList() {
      return Object.keys(this.sourceData);
    },
    titleName() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();

      return `${month}月${day}日 未填写名单`;
    },
  },
  data() {
    return {
      show: false,
      activeDept: "",
    };
  },
  watch: {
    isOpen() {
      this.show = this.isOpen;
      this.activeDept = this.deptList[0];
    },
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.un-write-dialog {
  &__tabs {
    .el-tabs__header {
      overflow: scroll;
      height: 300px !important;
    }
  }
}
</style>
